import Taro from "@tarojs/taro";
import { View, Video, Image } from "@tarojs/components";
import { StandardProps } from "@tarojs/components/types/common";
import { AtCurtain } from "taro-ui";
import "./index.scss";
import IconFont from "../iconfont";
import { useState, useEffect } from "react";

interface IVideoContainer {
  itemId?: number;
  src: string;
  children?: any;
  customStyle: StandardProps["style"];
  vClassName?: string;
  videoCover?: string;
  roomId?: number;
  disabledPlay?: boolean;
  liveStatusText?: string;
  play?: () => void
  auto: boolean
}

export const VideoCoverContainer = (props: IVideoContainer) => {

  const [showVideo, setShowVideo] = useState(false)

  const [videoContext, setVideoContext] = useState<any>()

  useEffect(() => {
    let videoContext = Taro.createVideoContext(
      `myVideo_${props.videoCover}`,
      this
    );
    setVideoContext(videoContext)
  }, [])

  useEffect(() => {
    if (props.auto && videoContext) {
      showVideoAction(videoContext)
    }
  }, [props.auto, videoContext])
  // const full = (e) => {
  //   console.log(e)
  //   // let videoContext = Taro.createVideoContext(
  //   //   `myVideo_${props.videoCover}`,
  //   //   this
  //   // );
  //   // * event.detail = {fullScreen, direction}，direction取为 vertical 或 horizontal
  //   if (e.detail.fullScreen && e.detail.direction === 'vertical') {
  //     videoContext.requestFullScreen({ direction: 90 })
  //   }

  // }

  const showVideoAction = (v?: any) => {
    if (props.disabledPlay && props.play) {
      props.play()
      return
    }
    setShowVideo(true)
    if (v) {
      console.log(v)
      v.play();
    } else {
      videoContext.play();
    }
  };

  const onClose = () => {
    setShowVideo(false)
    videoContext.pause();
  }

  const {
    vClassName,
    src,
    customStyle,
    videoCover,
  } = props;
  return (
    <View className={`${vClassName} video-or-image`}>
      {src ? (
        <View className="flex-container">
          <View className="mask-wrap">
            {videoCover && !showVideo ? (
              <Image
                onClick={() => showVideoAction()}
                style={customStyle}
                src={videoCover}
                // mode="heightFix"
                mode='scaleToFill'
              />
            ) : (
              <Video
                style={{ width: "100%" }}
                id={`myVideo_${videoCover}`}
                controls={true}
                showFullscreenBtn={true}
                showPlayBtn={true}
                enableAutoRotation={true}
                // onFullscreenChange={(e) => {
                //   full(e)
                // }}
                src={src}
              />
            )}
            {!showVideo && videoCover ? (
              <View className="mask">
                <View onClick={() => showVideoAction()}>
                  <IconFont size={80} name='bofang' color='#9c9999' />
                </View>

              </View>
            ) : (
              ""
            )}
          </View>
          {props.children}
        </View>
      ) : (
        <View className="flex-container">
          <Image
            style={customStyle}
            src={src}
            mode="widthFix"
          />
          {props.children}
        </View>
      )}
      {/* {showVideo ? (
        <AtCurtain
          isOpened={showVideo}
          onClose={onClose}
          closeBtnPosition="bottom"
        >
          <View>
            <Video
              style={{ width: "100%" }}
              id={`myVideo_${videoCover}`}
              controls={true}
              showFullscreenBtn={true}
              showPlayBtn={true}
              src={src}
            />
          </View>
        </AtCurtain>
      ) : (
          ""
        )} */}
    </View>
  );
}
